<template>
  <el-card class="box-card">
  <div slot="header" class="clearfix">
    <breadcrum>粉丝管理</breadcrum>
  </div>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="列表" name="list">
      <el-row class="demo-avatar demo-basic">
        <el-col :span="3" v-for = 'fan in fans' :key="fan.id.toString()">
          <div class="block">
            <el-avatar :size="80" :src="fan.photo" fit= 'cover'></el-avatar>
            <p>{{fan.name}}</p>
            <div class="demo-basic--circle">
              <el-tag>+关注</el-tag>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-pagination
        style="margin-top: 20px"
        @current-change = 'pageChange'
        background
        layout="prev, pager, next"
        :total="1000">
      </el-pagination>
    </el-tab-pane>
    <el-tab-pane label="画像" name="echart">
      <div id="main" style="width: 800px; height: 600px" ref = 'main'></div>
    </el-tab-pane>
  </el-tabs>
</el-card>
</template>

<script>
const echarts = require('echarts')
export default {
  data () {
    return {
      fans: [],
      page: 1,
      activeName: 'list',
      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
    }
  },
  methods: {
    async getFollowers () {
      try {
        const res = await this.$axios({
          url: '/mp/v1_0/followers',
          method: 'get',
          params: {
            page: this.page,
            per_page: 20
          }
        })
        console.log('获取粉丝列表成功', res)
        this.fans = res.data.data.results
      } catch (err) {
        console.log(err)
      }
    },
    draw () {
      var myChart = echarts.init(this.$refs.main)
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      }
      myChart.setOption(option)
    },
    async handleClick (tab) {
      if (tab.label === '列表') {
        this.getFollowers()
      } else {
        if (tab.label === '画像') {
          this.draw()
        }
      }
    },
    pageChange (curPage) {
      console.log(curPage)
      this.page = curPage
      this.getFollowers()
    }
  },
  async created () {
    this.getFollowers()
  }
}
</script>

<style lang="less" scoped>
  .block {
    width: 120px;
    height: 190px;
    border: 1px dashed #f1f1f1;
    text-align: center;
    margin-right: 30px;
  }
</style>
